<template>
  <div v-on="$listeners">
    <svg>
      <path :d="points" />
    </svg>
    <p>
      <slot></slot>
    </p>
  </div>
</template>
<script>
export default {
  name: "PortSvg",
  data() {
    return {
      points: "",
    };
  },
  mounted() {
    this.getPoints();
  },
  methods: {
    getPoints() {
      let width,
        height,
        borderRadius,
        chunkWidth,
        chunkHight,
        rad20,
        tan20,
        sin20,
        cos20,
        aw,
        ow,
        oh;
      let res = [];
      try {
        width = this.$el.clientWidth;
        height = width / 1.6;

        borderRadius = 2;

        chunkWidth = width / 5.5;
        chunkHight = height / 6;

        rad20 = (20 * Math.PI) / 180;
        tan20 = Math.tan(rad20);
        sin20 = Math.sin(rad20);
        cos20 = Math.cos(rad20);

        aw = tan20 * chunkHight;

        ow = sin20 * borderRadius;
        oh = cos20 * borderRadius;
      } catch (error) {
        this.points = res.join(" ");
      }

      res.push(`M 0 ${borderRadius}`);
      // 左上角
      res.push(
        `a ${borderRadius} ${borderRadius} 0 0 1 ${borderRadius} ${-borderRadius}`
      );
      // 上边
      res.push(`l ${width - borderRadius * 2} 0`);
      // 右上角
      res.push(
        `a ${borderRadius} ${borderRadius} 0 0 1 ${borderRadius} ${borderRadius}`
      );
      // 右边
      res.push(`l 0 ${(height * 3) / 4 - borderRadius * 2}`);
      // 右下角
      res.push(
        `a ${borderRadius} ${borderRadius} 0 0 1 ${-borderRadius} ${borderRadius}`
      );
      // 下边1
      res.push(`l ${-chunkWidth} 0`);
      // 下边2
      res.push(`l ${-aw + ow} ${chunkHight - oh}`);
      // 右底部圆角
      res.push(`c ${-ow} ${+oh} ${-ow} ${+oh} ${-ow - ow} ${+oh}`);
      // 下边3
      res.push(
        `l ${-width + borderRadius * 2 + chunkWidth * 2 + aw * 2 + ow * 2} 0`
      );
      // 左底部圆角
      res.push(`c ${-ow} 0 ${-ow} 0 ${-ow - ow} ${-oh}`);
      // 下边4
      res.push(`l ${-aw + ow} ${-chunkHight + oh}`);
      // 下边5
      res.push(`l ${-chunkWidth} 0`);
      // 左下角
      res.push(
        `a ${borderRadius} ${borderRadius} 0 0 1 ${-borderRadius} ${-borderRadius}`
      );
      // 左边
      res.push(`z`);

      this.points = res.join(" ");
    },
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
div {
  position: relative;
  p {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    color: inherit;
  }

  svg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    fill: inherit;

    path {
      fill: inherit;
    }
  }
}
</style>